/* CSS Document */

/* CSS Reset */

#main_content {
	clear: both;
	border: 1px solid #98d3fb;
    background-color: #98d3fb;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 5px 5px 5px #286d9c, -5px 5px 5px #286d9c;
	padding:0px 0px 15px 0px;
	text-align:left;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;

}


* {
	margin:0;
	padding:0;
	font-size:100%;
	font-weight:normal;
}

@font-face {
font-family: "schoolbullyregular";
    src: url("fonts/schoolbully-webfont.eot");
    src: url("fonts/schoolbully-webfont.eot?#iefix") format("embedded-opentype"),
         url("fonts/schoolbully-webfont.woff") format("woff"),
         url("fonts/schoolbully-webfont.ttf") format("truetype"),
         url("fonts/schoolbully-webfont.svg#schoolbullyregular") format("svg");
    font-weight: normal;
    font-style: normal;
}
	
/* Header */

header {
	color: #FFF;
	height: 150px;
	margin-left: auto;
    margin-right: auto;
	padding-bottom: 18px;
}

nav {
	width: 650px; /* 730 with sketches tab */ /* 840 with contact tab */ /* 675 */ /* 590 with 5 tabs */
	margin-left: auto;
	margin-right: auto;
	padding: 0px 0px 70px 0px;
	max-height: 999999px;
	font-family: schoolbullyregular;
}

nav ul {
	margin-top: 10px;
	padding: 0px 0px 0px 50px;
	margin-right: 0px;
	/*padding-left: 50px;*/
}

nav li {
	margin: 0px;
	padding: 0px;
	float: left;
	text-align:center;
	list-style-type: none;
}
	
/* Header link CSS */

nav a { /* This is the Navigation button part */
	/* border: 1px solid #00; */
	textalign: center;
	padding-top: 23px;
	padding-bottom: 15px;
	display: block;
	color: #FFF;
	/* background-color: #21DAFF; */
	font-size:2em;
}

nav a:link, nav a:visited, nav li a:visited { /*before the link has been clicked */ /*when you click it becomes... */
	color: #FFF;
	text-decoration: none;
}

nav a:hover { /* When you hover over it */
	color: #3445C0
	text decoration: underline; 
}

nav a:active { /*when it's clicked */
	/* font-size: 75px; */
}

h1 {
	text-align:center;
	font-size: 50px;
	color: #21DAFF;
	font-family: schoolbullyregular;
	top: 50px;
}

h1 a:link, h1 a:visited, nav a:visited { 
/*before the link has been clicked */ 
/*when you click it becomes... */
	text-decoration: none;
	color: #21DAFF;
}

h2 { 
	text-align:center;
	font-size: 80px;
	font-family: schoolbullyregular;
	color: #21DAFF;
}

body {
	textalign: center;
	background-color: #0f84d5; /*#3291d2;*/ /*#6faad2*/
	background-repeat: no-repeat;
	background-position: top center;
	background-attachment:fixed;
	/* background-size: 100px; */
	
}

#bluejay {
	position: absolute; 
	display: block;
	top: -73px;
	left: -15px;
	width: 39%; /*46*/
	transition: all .25s ease;
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

#bluejay2 {
	position: absolute;
	display: block;
	/* bottom: 170px; */
	top: 0 px;
	right: 15px;
	width: 26%;
	transition: all .25s ease;
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-delay: 0s;
	/* z-index: 9998; */
}

#leaves {
	position: absolute; 
	display: block;
	width: 1400px;
	opacity:0.3;
	filter:alpha(opacity=40); /* For IE8 and earlier */
}

#skyimage {
	position: absolute; 
	display: block;
	opacity:0.4;
	filter:alpha(opacity=40); /* For IE8 and earlier */
	z-index: -1;
}

#crownlogo {
	transition: all .25s ease;
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

#crownlogo:hover {
	opacity: 0.6;
}

#crown {
	position: absolute; 
	display: block;
	top: 1px;
	left: 275px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	z-index: -1;
	opacity: 0.15; 
	padding-top: 18px;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#stevieraythompson a {
	float: left;
	font-family:schoolbullyregular;
	font-size: 53px;
	color: #FFF;
	text-decoration: none;
	letter-spacing: 0.9px;
	margin-top: 35px;
	margin-left: 315px;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#illustration a {
	font-family:schoolbullyregular;
	color: #FFFFFF;
	font-size: 90px;
	float: left;
	text-decoration: none;
	margin-top: -23px;
	margin-left: 279px;
	letter-spacing: 7.1px;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#homebutton {
	width: 100px;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	
}

#homebutton:hover {
	background-color: #98D3FB;
}

#processbutton {
	width: 110px;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	
}

#processbutton:hover {
	background-color: #98D3FB;
}

#gallerybutton {
	width: 120px;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	
}

#gallerybutton:hover {
	background-color: #98D3FB;
}

#linkedinbutton {
	width: 110px;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	
}

#linkedinbutton:hover {
	background-color: #98D3FB;
}

#storebutton {
	width: 110px;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	
}

#storebutton:hover {
	background-color: #98D3FB;
}

#biographybutton {
	width: 100px;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	
}

#biographybutton:hover {
	background-color: #98D3FB;
}

#contactbutton {
	width: 120px;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	
}

#contactbutton:hover {
	background-color: #98D3FB;
}

#explorebuttons {
}

#fbbutton {
	position: absolute;
	display: block;
	top: 137px;
	right: 143px;
	width: 6%;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#fbbutton:hover {
	opacity: 0.65;
}

#linbutton {
	position: absolute;
    display: block;
    top: 67px;
    right: 143px;
    width: 6%;
    transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;

}

#linbutton:hover {
	opacity: 0.65;
}

#cfbutton {
	position: absolute;
	display: block;
	top: 67px;
	right: 67px;
	width: 6%;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;

}

#cfbutton:hover {
	opacity: 0.65;

}

#embutton {
    position: absolute;
	display: block;
	top: 137px;
	right: 69px;
	width: 6%;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;

}

#embutton:hover {
	opacity: 0.65;

}

/* Main content */

#wrapper {
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	text-decoration:none;
	position: relative;
	padding:20px 0px 0px 0px;
	padding-bottom: 38px;

}

#main_content img {
    transition: all .25s ease;
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-delay: 0s;

}

#main_content img:onmouseover {
    transition: all .25s ease;
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-delay: 0s;

}

#main_content img:hover {
    transition: all .25s ease;
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-delay: 0s;
    opacity: 0.65;
}

#text_area {
	margin-left: auto;
	margin-right: auto;
	padding:0px 15px 0px 20px;
}

#illustrationbutton {
  background-image: url(../images/illustrationgallerybanner.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* put the height and width of your image here */
  height: 165px;
  width: 904px;
  border: none;
  transition: all .25s ease;
   transition-property: all;
   transition-duration: 0.25s;
   transition-timing-function: ease;
   transition-delay: 0s;
  background-color: #98d3fb;
  margin-bottom: 12px;

}

#illustrationbutton:hover {
    opacity: 0.65;

}

#graphicdesignbutton {
  background-image: url(../images/designgallerybanner.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* put the height and width of your image here */
  height: 165px;
  width: 904px;
  border: none;
  transition: all .25s ease;
   transition-property: all;
   transition-duration: 0.25s;
   transition-timing-function: ease;
   transition-delay: 0s;
  background-color: #98d3fb;
  margin-bottom: 12px;

}

#graphicdesignbutton:hover {
    opacity: 0.65;
}

#webdesignbutton {
  background-image: url(../images/webgallerybanner.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* put the height and width of your image here */
  height: 165px;
  width: 904px;
  border: none;
  transition: all .25s ease;
   transition-property: all;
   transition-duration: 0.25s;
   transition-timing-function: ease;
   transition-delay: 0s;
  background-color: #98d3fb;
  margin-bottom: 12px;

}

#webdesignbutton:hover {
    opacity: 0.65;
}

#videobutton {
  background-image: url(../images/videogallerybanner.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* put the height and width of your image here */
  height: 165px;
  width: 904px;
  border: none;
  transition: all .25s ease;
   transition-property: all;
   transition-duration: 0.25s;
   transition-timing-function: ease;
   transition-delay: 0s;
   background-color: #98d3fb;

}

#videobutton:hover {
    opacity: 0.65;
}

#spoiler4 {
	padding-top: 20px;
}

#linkbox {
	float: left;
}

#Backtotop {
	text-align:center;
	padding-top: 8px;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color:#59bcff;
	z-index: 9999;
	
}

#Copyright {
	text-align:center;
}

#spoiler {
	padding-bottom: 10px;
}

#spoiler2 {
	padding-bottom: 10px;
}

#spoiler3 {
	padding-bottom: 10px;
}

@media screen and (max-width: 1200px) { /* MOBILE DEVICES */ /* --------------------------------------------------------------------------- */

#bluejay2 {
	position: absolute;
	display: block;
	/* bottom: 170px; */
	top: 0 px;
	right: 15px;
	width: 26%;
	opacity:0.65;
	transition: all .25s ease;
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-delay: 0s;
	/* z-index: 9998; */
}

	}

@media screen and (max-width: 1100px) { /* MOBILE DEVICES */ /* --------------------------------------------------------------------------- */

nav {
	/* border: .5px solid #000; */
	/* width: 100%; */
	margin-left: auto;
	margin-right: auto;
	padding: 0px 0px 70px 0px;
	max-height: 999999px;
}

nav ul {
	/* border: 4px solid #f000; */
	margin: 10px;
	padding: 0px;
	margin-right: 0px;
	padding-left: 50px;
}

nav a {
	font-family: schoolbullyregular;
	font-size: 34px;
}

#bluejay2 {
	position: absolute; 
	margin-left:auto;
	margin-right:auto;
	display: block;
	width: 0%;
	opacity:0;
	transition: all .25s ease;
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-delay: 0s;
	/* z-index: 9998; */
}

}

@media screen and (max-width: 960px) { /* MOBILE DEVICES */ /* --------------------------------------------------------------------------- */
nav {
	/* border: .5px solid #000; */
	/* width: 500px; /*675px*/
	margin-left: auto;
	margin-right: auto;
	/* padding: 0px 0px 70px 0px; */
	max-height: 999999px;
}

nav ul {
	/* border: 4px solid #f000; */
	margin: 10px;
	padding: 0px;
	margin-right: 0px;
	padding-left: 50px;
}

nav a {
	font-family: schoolbullyregular;
	font-size: 34px;
}

img {
  max-width: 100%
}

#bluejay2 {
	position: absolute; 
	margin-left:auto;
	margin-right:auto;
	display: block;
	width: 0%;
	/* z-index: 9998; */
}

}

@media screen and (max-width: 930px) { /* MOBILE DEVICES */ /* --------------------------------------------------------------------------- */
nav {
	/* border: .5px solid #000; */
	/* width: 500px; /*675px*/
	margin-left: auto;
	margin-right: auto;
	padding: 0px 0px 70px 0px;
	font-family:sans-serif;
	font-size:8px;
	max-height: 999999px;
}

#bluejay {
	margin-left:auto;
	margin-right:auto;
	display: block;
	width:360px;
	
}

#bluejay2 {
	position: absolute; 
	margin-left:auto;
	margin-right:auto;
	display: block;
	width: 0%;
	/* z-index: 9998; */
}

#main_content {
	width:930px;
}

}

@media screen and (max-width: 630px) { /* MOBILE DEVICES */ /* --------------------------------------------------------------------------- */
 header {
    text-align: none;
}
  header h1,
  header a {
    font-size: 12px;
}
  .picturegallery {
    padding: 0;
    border-bottom: 0;
}
  .section--head p {
    font-size: 18px;
    line-height: 24px;
}

#bluejay {
	margin-left:auto;
	margin-right:auto;
	display: block;
	width:360px;
	
}

  #main_content {
    /* width: 630px; */
}

  nav {
    /* width: 150px; */
    margin-left: auto;
    margin-right: auto;
    padding: 0px 0px 0px 0px;
    font-family: sans-serif;
    font-size: 72px;
    max-height: 999999px;
}

#homebutton {
	/* width: 100px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	
}

#homebutton:hover {
	background-color: #98D3FB;
}

#processbutton {
	/* width: 120px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#processbutton:hover {
	background-color: #98D3FB;
}

#gallerybutton {
	/* width: 120px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#gallerybutton:hover {
	background-color: #98D3FB;
}

#linkedinbutton {
	/* width: 120px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#linkedinbutton:hover {
	background-color: #98D3FB;
}

#storebutton {
	/* width: 130px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#storebutton:hover {
	background-color: #98D3FB;
}

#biographybutton {
	/* width: 120px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#biographybutton:hover {
	background-color: #98D3FB;
}

#contactbutton {
	/* width: 120px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#contactbutton:hover {
	background-color: #98D3FB;
}

}

@media screen and (max-width: 400px) { /* MOBILE DEVICES */ /* --------------------------------------------------------------------------- */

header {
	color: #FFF;
	height: 220px;
	margin-left: auto;
        margin-right: auto;
	padding-bottom: 18px;
}

#crown {
	display: block;
	width: 50%;
	/* margin-left:auto; */
	/* margin-right:auto; */
	left: 234px;
}

#stevieraythompson a {
	float: left;
	font-family:schoolbullyregular;
	font-size: 67px;
	color: #FFF;
	text-decoration: none;
	letter-spacing: 0.9px;
	margin-top: 44px;
	margin-left: 245px;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#illustration a {
	font-family:schoolbullyregular;
	color: #FFFFFF;
	font-size: 102px;
	float: left;
	text-decoration: none;
	margin-top: -31px;
	margin-left: 246px;
	letter-spacing: 7.1px;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#bluejay {
	margin-left:auto;
	margin-right:auto;
	display: block;
	top: -50px;
	left: -15px;
	/* width:225px; */
	width:0px;
}

#bluejay2 {
	position: absolute; 
	margin-left:auto;
	margin-right:auto;
	display: block;
	width: 0%;
	/* z-index: 9998; */
}

nav {
     width: 970px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 0px 0px 0px;
    font-family: sans-serif;
    font-size: 72px;
    padding-top: 30px; /* 70 */
    max-height: 999999px;
}

nav ul {
	/* border: 4px solid #f000; */
	/* margin: 10px; */
	padding-left: 14px;
	/* margin-right: 0px; */
	/* padding-left:0px !important; */
	/* width: 950px; */
}

nav a { /* This is the Navigation button part */
	/* border: 1px solid #00; */
	textalign: center;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	display: block;
	color: #FFF;
	/* background-color: #21DAFF; */
}

nav a:link, nav a:visited {
    font-size: 72px;
    font-family: schoolbullyregular;
}

#explorebuttons {
	top: 209px;
	width: 10%;
}

#linkbox {
	float: none;
	margin-top: 147px;
}

#main_content {
	/* width:100%; */
}

#fbbutton {
	position: absolute;
	display: block;
	top: 280px;
	right: 760px;
	width: 17%;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#linbutton {
	position: absolute;
	display: block;
	top: 280px;
	right: 512px;
	width: 17%;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;

}

#cfbutton {
	position: absolute;
	display: block;
	top: 280px;
	right: 246px;
	width: 17%;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#embutton {
    position: absolute;
	display: block;
	top: 280px;
	right: 4px;
	width: 17%;
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
}

#homebutton {
	/* width: 100px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	float: left;
	width: 48%;
	background-color: #6DBAEF;
	border-radius: 12px;
	height: 130px;
	border: 1px solid aliceblue;
	/* margin-bottom: 22px; */
	margin-right: 14px;
}

#homebutton a {
	margin-top:18px;
}

#homebutton:hover {
	background-color: #98D3FB;
}

#processbutton {
	/* width: 120px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	float: left;
	width: 48%;
	background-color: #6DBAEF;
	border-radius: 12px;
	height: 130px;
	border: 1px solid aliceblue;
	margin-bottom: 14px;
}

#processbutton a {
	margin-top:18px;
}

#processbutton:hover {
	background-color: #98D3FB;
}

#gallerybutton {
	/* width: 120px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	float: left;
	width: 48%;
	background-color: #6DBAEF;
	border-radius: 12px;
	height: 130px;
	border: 1px solid aliceblue;
	margin-right: 14px;
}

#gallerybutton a {
	margin-top:18px;
}

#gallerybutton:hover {
	background-color: #98D3FB;
}

#linkedinbutton {
	/* width: 120px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	float: left;
	width: 48%;
	background-color: #6DBAEF;
	border-radius: 12px;
	height: 130px;
	border: 1px solid aliceblue;
	margin-bottom: 14px;
}

#linkedinbutton a {
	margin-top:18px;
}

#linkedinbutton:hover {
	background-color: #98D3FB;
}

#storebutton {
	/* width: 130px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	float: left;
	width: 48%;
	background-color: #6DBAEF;
	border-radius: 12px;
	height: 130px;
	border: 1px solid aliceblue;
	margin-right: 14px;
}

#storebutton a {
	margin-top:18px;
}

#storebutton:hover {
	background-color: #98D3FB;
}

#biographybutton {
	/* width: 120px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	float: left;
	width: 48%;
	background-color: #6DBAEF;
	border-radius: 12px;
	height: 130px;
	border: 1px solid aliceblue;
	margin-bottom: 14px;
}

#biographybutton a {
	margin-top:18px;
}

#biographybutton:hover {
	background-color: #98D3FB;
}

#contactbutton {
	/* width: 120px; */
	transition: all .25s ease;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transition-delay: 0s;
	float: left;
	width: 99.7%;
	background-color: #6DBAEF;
	border-radius: 12px;
	height: 130px;
	border: 1px solid aliceblue;
	margin-bottom: 31px; /* 13 */
}

#contactbutton a {
	margin-top:18px;
}

#contactbutton:hover {
	background-color: #98D3FB;
}

}